<script setup lang="ts">
import { ref, watch, defineEmits } from 'vue';
import TopInput from './components/top-input.vue';
import TopTable from './components/top-table.vue';
import CenterTable from './components/center-table.vue';
import BottomTable from './components/bottom-table.vue';

const emit = defineEmits(['updateTableData']);
const tableData = ref<any>('');
const tableDataConsole = ref<any>('');
const consoleId = ref<any>('');
const consoleNameInput = ref<any>('');
const consoleNameTable = ref<any>('');
watch(
  tableData,
  () => {
    emit('updateTableData', tableData.value);
  },
  { deep: true }
);
</script>

<template>
  <div class="flow-query">
    <a-card>
      <template #title>
        <div class="card-title">预配套任务查询</div>
      </template>
      <div class="content">
        <TopInput
          @update-array="tableData = $event"
          @update-array-console="tableDataConsole = $event"
          @console-name-input="consoleNameInput = $event"
          :console-id="consoleId"
          :console-name-table="consoleNameTable"
        />
        <TopTable
          @console-id="consoleId = $event"
          @console-name-table= "consoleNameTable = $event"
          :table-data="tableData"
          :table-data-console="tableDataConsole"
          :console-name-input="consoleNameInput"
        />
        <CenterTable />
        <BottomTable />
      </div>
    </a-card>
  </div>
</template>

<style scoped>
.flow-query {
  margin: 0px;
  padding: 10px;
  height: 100%;
}
.card-title {
  font-size: 24px;
}
.content {
  display: flex;
  flex-direction: column;
}
</style>
